<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<apes-content>
  <apes-card [apesBordered]="false">
    <!-- 查询条件(固定) -->
    <div class="apes-data-kanban">

      <div apes-col apesSpan="24">
        <div apes-row>

          <!-- 物流站点 -->
          <div apes-col apesSpan="8">
            <span class="data-kanban-label">物流站点：</span>
            <div class="boxDiv">
              <ng-select [items]="itemsData" bindLabel="name" [(ngModel)]="site"></ng-select>
            </div>
          </div>


          <!-- 日期 -->
          <div apes-col apesSpan="8">
            <apes-radio-group [(ngModel)]="timeValue" class="data-kanban-radio">
              <label apes-radio *ngFor="let list of timeList" [apesValue]="list.value">
                <span>{{list.name}}</span>
              </label>
            </apes-radio-group>
          </div>

          <!-- 时段 -->
          <div apes-col apesSpan="8">
            <span class="data-kanban-label">时段：</span>
            <div class="boxDiv">
              <apes-range-picker [(ngModel)]='timeFrame' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
            </div>
          </div>

        </div>
      </div>

      <!--小方块查询条件-->
      <div apes-col apesSpan="24" style="padding: 0;">
        <ul class="box-ul">
          <li class="box-li" *ngFor="let list of girdList"
              (click)="btnChange(list)"
              [class.box-foc]="list.id === nowGird">
            <div>{{list.name}}</div>
            <div>{{list.num}}</div>
          </li>
        </ul>
      </div>

      <div apes-col [apesMd]="24" *ngIf="nowGird == 'findByUnassigned'">
        <div apes-form-item apes-row class="apes-item" style="padding: 16px;">
          <formly-form [model]="model" [fields]="field" [options]="options" [form]="form"></formly-form>

          <button apes-button apesType="primary" (click)="clickDesignate()">确认指派</button>
        </div>
      </div>

      <div apes-col [apesMd]="24" *ngIf="nowGird == 'findWaybillByTransit'">
        <div apes-form-item apes-row class="apes-item" style="padding: 16px;">
          <button apes-button apesType="primary" (click)="clickTransfer()">中转收件</button>
        </div>
      </div>

      <div apes-col [apesMd]="24" *ngIf="nowGird == 'findByCollection'">
        <div apes-row class="apes-item" style="padding: 16px;">

          <!-- 采购订单 -->
          <div apes-col apesSpan="8">
            <span class="data-kanban-label">供应商订单号：</span>
            <div class="boxDiv">
              <!--<apes-input-group [apesSuffix]="inputClearTpl">-->
                <input apes-input [(ngModel)]="aimsKey"/>
              <!--</apes-input-group>-->
              <!--<ng-template #inputClearTpl>-->
                <!--<i apes-icon class="ant-input-clear-icon" apesType="close-circle" *ngIf="purchaseOrder"-->
                  <!--(click)="purchaseOrder = null"></i>-->
              <!--</ng-template>-->
            </div>
          </div>


          <!-- 供应商 -->
          <div apes-col apesSpan="8">
            <span class="data-kanban-label">供应商：</span>
            <div class="boxDiv">
              <input apes-input [(ngModel)]="supplierId"/>
            </div>
          </div>

          <!-- 报价组 -->
          <div apes-col apesSpan="8">
            <span class="data-kanban-label">报价组：</span>
            <div class="boxDiv">
              <ng-select style="width: 240px; display: inline-block;"
                         clearAllText
                         [items]="offerGroup"
                         bindLabel="BJZ"
                         bindValue="BJZ"
                         [placeholder]="'选填'" [notFoundText]="'无法找到'" typeToSearchText [(ngModel)]="offerGroupID">
              </ng-select>
            </div>
          </div>

        </div>
      </div>

      <div apes-col [apesMd]="24" *ngIf="nowGird != 1 || nowGird != 5" style="height: 74px;">

      </div>

    </div>

    <!-- 显示内容 -->
    <div apes-row apesGutter="24" apesSpan="16">

      <!-- 左侧 数据展示 -->
      <div style="padding: 16px">
        <ag-grid-angular #grid
                         style="width: 100%;margin-bottom:16px;min-height: 300px;"
                         [ngStyle]="{ height: height }"
                         class="ag-theme-balham"
                         [enableColResize]="true"
                         [suppressLoadingOverlay]="true"
                         [suppressRowClickSelection]="true"
                         [rowSelection]="'multiple'"
                         [rowData]="rowData"
                         [modules]="modules"
                         [frameworkComponents]="frameworkComponents"
                         (gridReady)="onGridReady($event)"
                         (selectionChanged)="onSelectionChanged($event)"
                         [gridOptions]="gridOptions"
                         [columnDefs]="columnDefs">
        </ag-grid-angular>
      </div>
    </div>

  </apes-card>
</apes-content>
